import type { BingElements } from '../../../../../../../../types/constants/personalization/bing'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import { PAGE_ELEMENTS, SUPPORTED_PLATFORMS } from '../../../../../../../../types/constants'
import { SearchCommonStyles } from '../../common'

export class BingVideoPage {
  elements: BingElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.BING]
  private static instance: BingVideoPage
  private readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()
  private readonly searchCommonStyles: SearchCommonStyles = SearchCommonStyles.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): BingVideoPage {
    if (!BingVideoPage.instance) {
      BingVideoPage.instance = new BingVideoPage()
    }
    return BingVideoPage.instance
  }

  init(): void {
  }

  /**
   * 无搜索结果样式
   */
  noSearchResult(): string {
    return ``
  }

  titleStyles(): string {
    return `
    .mc_vtvc_meta_w {
      /* 标题 */
      .mc_vtvc_title {
        color: var(${this.themeVarService.link.default.text}) !important;
        overflow: visible !important;
        
        &:hover {
          color: var(${this.themeVarService.link.default.textHover}) !important;
          
          strong {
            color: var(${this.themeVarService.link.default.textHover}) !important;
          }
        }
        
        strong {
          color: var(${this.themeVarService.link.default.text}) !important;
          font-size: ${this.themeVarService.search.resultItem.titleFontSize} !important;
          font-weight: normal !important;
        }
      }
    }
    `
  }

  getMainStyles(): string {
    return `
    /* 隐藏处理 */
    #b_content #vm_res {
      .vsb_canvas.isvsr ~ .vsb_canvas.isvsr {
        .mm_vdcv_label {
          h2 {
            display: none !important;
          }
        }
      }
    }
    
    /* 主内容 */
    #b_content {
      #fbdialog {
        background-color: transparent !important;
      }
      
      /* 迷你顶部菜单 */
      #miniheader {
        background-color: var(${this.themeVarService.search.header.background}) !important;
        box-shadow: none !important;
        
        table {
          display: flex !important;
          justify-content: center !important;
          background-color: transparent !important;
        }
      }
      
      #vm_res {
        #vm_c {
          #nr_indicator {
            border-bottom: none !important;

            h2 {
              color: var(${this.themeVarService.search.resultItem.noItemTip}) !important;
            }
            
            a {
              color: var(${this.themeVarService.link.default.text}) !important;
              
              &:hover {
                color: var(${this.themeVarService.link.default.textHover}) !important;
                text-decoration: none !important;
              }
            }
          }
        }

        #vsb_vid_cat {
          /* 视频结果列表一 */
          .ecc {
            ${this.searchCommonStyles.resultContainerStyles({ columns: 5 })}
            
            /* 视频结果项 */ 
            > .mmlp {
              ${this.searchCommonStyles.resultItemStyles({ fullWidth: true })}
              
              /* 封面悬浮样式调整，避免出现右侧白线 */
              .vrhc {
                .vrhcp {
                  left: 2px !important;
                }
              }
              
              .mc_vtvc_th {
                background-color: transparent !important;
              }
              
              ${this.titleStyles()}
            }
          }

          /* 更多结果 */
          .mm_seemore {
            .btn_seemore {
              background-color: transparent !important;
              color: var(${this.themeVarService.link.default.text}) !important;
            }
          }
          
          .mm_vdcv_cnt {
            /* 更多视频标题 */
            .mm_vdcv_label {
              display: flex !important;
              justify-content: center !important;
            }
            
            /* 视频结果列表二 */
            .mc_fgvc {
              ${this.searchCommonStyles.resultContainerStyles({ columns: 5 })}
              
              /* 视频结果项 */ 
              > .mc_fgvc_u {
                ${this.searchCommonStyles.resultItemStyles({ fullWidth: true })}
                
                /* 封面悬浮样式调整，避免出现右侧白线 */
                .vrhc {
                  .vrhcp {
                    left: 2px !important;
                  }
                }
                
                .mc_vtvc_th {
                  background-color: transparent !important;
                }
                
                ${this.titleStyles()}
              }
            }
          }
        }
      }
    }
    
    #fbpgbt {
      background-color: transparent !important;
      border: none !important;
      right: 0 !important;
      bottom: 10px !important;
    }
    `
  }
}
